<template>
  <div class="container">
    <h2>基础面积图</h2>
    <div class="chart-container">
      <div id="basicAreaChart" style="height:500px"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "basicAreaChart",
  data() {
    return {
      option: {
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            // 区域填充样式。设置后显示成区域面积图。
            areaStyle: {},
          },
        ],
      },
    };
  },
  mounted() {
    this.getLineChart();
  },
  methods: {
    // 设置折线图
    getLineChart() {
      this.lineChart = this.$echart.init(
        document.getElementById("basicAreaChart")
      );
      this.lineChart.setOption(this.option);
    },
  },
};
</script>

<style lang="less">
.chart-container {
  canvas {
    // width: 200px !important;
  }
}
</style>